<template>
  <div class="recommend">
    <!-- banner轮播 -->
    <mt-swipe :auto="4000">

      <mt-swipe-item v-for="(bn,i) in banners" :key="i" >
          <img :src="bn.picUrl" alt="">
      </mt-swipe-item>

    </mt-swipe>

    <div class="personalized">
      <h3>推荐歌单</h3>
      <ul class="songlist">
        <li v-for="(p,index) in personalized" :key="index" class="">
          <router-link :to="{path:'/list?id='+p.id}" >
            <div class="imgBox">
              <img  v-lazy="p.picUrl" alt="">
            </div>
            <p>{{p.name}}</p>

          </router-link>
        </li>
      </ul>
    </div>

    <div class="personalized">
      <h3>最热歌单</h3>
      <ul class="songlist">
        <li v-for="(p,index) in newsong" :key="index" class="">
          <router-link :to="{path:'/list?id='+p.id}" >
            <div class="imgBox">
              <img v-lazy="p.coverImgUrl" alt="">
            </div>
            <p>{{p.name}}</p>
          </router-link>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
export default {
  mounted () {
    // banner
    if(!sessionStorage.getItem("index_banners")){
      this.axios.get("/banner").then((res)=>{
        this.banners = res.data.banners;
        var json_data = JSON.stringify(this.banners);
        sessionStorage.setItem("index_banners",json_data);
      })
    }else{
      this.banners = JSON.parse(sessionStorage.getItem("index_banners"));
    }
    // 推荐歌单
    if(!sessionStorage.getItem("index_personalized")){
      this.axios.get("/personalized").then((res)=>{
        this.personalized = res.data.result.splice(0,6);
        var json_data = JSON.stringify(this.personalized);
        sessionStorage.setItem("index_personalized",json_data);
      })
    }else{
      this.personalized = JSON.parse(sessionStorage.getItem("index_personalized"));
    }
    // 新歌
    if(!sessionStorage.getItem("index_newsong")){
      this.axios.get("/top/playlist",{params:{limit:6,order:"hot"}}).then((res)=>{
        console.log(res.data);
        this.newsong = res.data.playlists;
        var json_data = JSON.stringify(this.newsong);
        sessionStorage.setItem("index_newsong",json_data);
      })
    }else{
      this.newsong = JSON.parse(sessionStorage.getItem("index_newsong"));
    }

  },
  data(){
    return {
      banners:[],
      personalized:[],
      newsong:[],
    }
  },
  methods:{



  }
}
</script>


<style lang="scss" scoped>
.recommend{
  width: 100%;
  .mint-swipe{
    height: 46vw;
    img{
      width: 100%;
    }
  }

  h3{
    line-height: 45px;
    padding-left: 10px;
    color: #42b983;
  }
  .personalized{
    border-bottom: 1px solid rgba(0, 0, 0,0.1);
  }
  .songlist{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li{
      width: 32vw;
      margin-bottom: 20px;
      .imgBox{
        background: #a1a1a1;
        font-size: 0;
      }
      p{
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: left;
        font-size: 12px;
      }
      img{
        width: 100%;
      }
    }
  }

}

</style>

